<script setup lang="ts">
import type { EChartsOption } from 'echarts';
import echarts from '@/plugins/echarts';
import { debounce } from 'lodash-es';
import 'echarts-wordcloud';
import { propTypes } from '@/utils/propTypes';
import { computed, PropType, ref, unref, watch, onMounted, onBeforeUnmount, onActivated } from 'vue';
import { isString } from '@/utils/is';
import { useDesign } from '@/hooks/web/useDesign';
import 'echarts/lib/component/toolbox';
import { GraphicComponent, VisualMapComponent, DataZoomComponent, MarkLineComponent, MarkPointComponent } from 'echarts/components';
import { GaugeChart } from 'echarts/charts';

echarts.use([GraphicComponent, VisualMapComponent, GaugeChart, DataZoomComponent, MarkLineComponent, MarkPointComponent]);

const { getPrefixCls, variables } = useDesign();
const prefixCls = getPrefixCls('echart');

const props = defineProps({
  options: {
    type: Object as PropType<EChartsOption>,
    required: true
  },
  width: propTypes.oneOfType([Number, String]).def('100%'),
  height: propTypes.oneOfType([Number, String]).def('500px')
});

const theme = computed(() => {
  const echartTheme: boolean | string = unref(false) ? true : 'auto';
  return echartTheme;
});

const options = computed(() => {
  return Object.assign(props.options, {
    darkMode: unref(theme)
  })
})

// const options = computed(() => {
//   return {
//     ...props.options,
//     darkMode: unref(theme),
//     legend: {
//       type: 'scroll', // 图例滚动
//       orient: 'vertical', // 垂直排列
//       left: 'right', // 图例位置靠左
//       top: 'center', // 图例垂直居中
//       itemWidth: 15, // 图例项宽度
//       itemHeight: 12, // 图例项高度
//       pageIconSize: [12, 12], // 分页按钮大小
//       pageTextStyle: {
//         color: '#666' // 分页文本样式
//       }
//     }
//   };
// });

const elRef = ref<ElRef>();
let echartRef: Nullable<echarts.ECharts> = null;
const contentEl = ref<Element>()

const styles = computed(() => {
  const width = isString(props.width) ? props.width : `${props.width}px`;
  const height = isString(props.height) ? props.height : `${props.height}px`;
  return {
    width,
    height
  };
});

const initChart = () => {
  if (unref(elRef) && props.options) {
    echartRef = echarts.init(unref(elRef) as HTMLElement);
    echartRef.setOption(unref(options));
  }
};

watch(
  () => options.value,
  (options) => {
    if (echartRef) {
      echartRef.setOption(options);
    }
  },
  {
    deep: true
  }
);

const resizeHandler = debounce(() => {
  if (echartRef) {
    echartRef.resize();
  }
}, 100);

function resize(myChart: any) {
  window.addEventListener('resize', function () {
    myChart.resize();
  });
}

const contentResizeHandler = async (e: TransitionEvent) => {
  if (e.propertyName === 'width') {
    resizeHandler()
  }
}

// onMounted(() => {
//   initChart();
//   window.removeEventListener('resize', function () {
//     myChart.resize();
//   });
// });
onMounted(() => {
  setTimeout(() => {
    initChart()
  }, 0)

  window.addEventListener('resize', resizeHandler)

  contentEl.value = document.getElementsByClassName(`${variables.namespace}-layout-content`)[0]
  unref(contentEl) &&
  (unref(contentEl) as Element).addEventListener('transitionend', contentResizeHandler)
})

// onBeforeUnmount(() => {
//   window.removeEventListener('resize', resizeHandler);
// });
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler)
  unref(contentEl) &&
  (unref(contentEl) as Element).removeEventListener('transitionend', contentResizeHandler)
})

// onActivated(() => {
//   if (echartRef) {
//     echartRef.resize();
//   }
// });
onActivated(() => {
  if (echartRef) {
    echartRef.resize()
  }
})
</script>

<template>
  <div ref="elRef" :class="[$attrs.class, prefixCls]" :style="styles"></div>
</template>
